<!-- component 关闭按钮
@param{Stirng}size 大小  单位为upx
@param{String}color 颜色 #000 -->
<template>
	<button>
		<view class="m-close" :style="{width: calcSize,height: calcSize}">
			<view class="u-close-line1" :style="{backgroundColor: color}"></view>
			<view class="u-close-line2" :style="{backgroundColor: color}"></view>
		</view>
	</button>
</template>

<script>
	export default {
        props: ['size', 'color'],
        computed: {
            calcSize() {
                return uni.upx2px(this.size) + 'px';
            }
        },
	}
</script>

<style>
    .m-close {
        width: 88upx;
        height: 88upx;
        position: relative;
        transform: rotate(45deg);
    }
    .u-close-line1,
    .u-close-line2 {
        border-radius: 88upx;
        background-color: #000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .u-close-line1 {
        width: 100%;
        height: 7upx;
    }
    .u-close-line2 {
        width: 7upx;
        height: 100%;
        left: 50%;
    }
</style>
